<template>
  <div class="app-container">
    <el-card>
      <div slot="header" style="text-align: center">
        <span>卖出收益记录</span>
      </div>

      <el-table
        :data="sortedTableData"
        border
        style="width: 100%"
        :header-cell-style="{background: '#f5f7fa', 'text-align': 'center'}"
        :cell-style="{'text-align': 'center'}"
        fit
      >

        <el-table-column
          prop="rank"
          label="排名"
          width="80"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.rank === 1">🥇</span>
            <span v-else-if="scope.row.rank === 2">🥈</span>
            <span v-else-if="scope.row.rank === 3">🥉</span>
            <span v-else>{{ scope.row.rank }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="name"
          label="水果名称"
        />

        <el-table-column
          prop="day"
          label="日期"
        />

        <el-table-column
          prop="jinhuo"
          label="进货地"
        />

        <el-table-column
          prop="kucun"
          label="库存(kg)"
        />

        <el-table-column
          prop="maichu"
          label="卖出(kg)"
        />

        <el-table-column
          prop="price"
          label="价格(元/kg)"
        />

        <el-table-column
          prop="shouyi"
          label="收益(元)"
          :cell-class-name="highlightTopThree"
        />
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getMaichuData } from '@/api/group'
export default {
  data() {
    return {
      tableData: []
    }
  },
  computed: {
    sortedTableData() {
      return this.tableData
        .map(item => ({ ...item }))
        .sort((a, b) => b.shouyi - a.shouyi)
        .map((item, index) => ({ ...item, rank: index + 1 }))
    }
  },
  async created() {
    const res = await getMaichuData()

    this.tableData = res.data

    console.log(res.data)
  },
  methods: {

    highlightTopThree({ row }) {
      if (row.rank === 1) return 'top-one'
      if (row.rank === 2) return 'top-two'
      if (row.rank === 3) return 'top-three'
      return ''
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}
.el-table {
  overflow-x: auto;
}

.el-table /deep/ .top-one {
  background-color: #fff8e6;
  font-weight: bold;
  color: #ffd700;
}

.el-table /deep/ .top-two {
  background-color: #f5f5f5;
  color: #c0c0c0;
}

.el-table /deep/ .top-three {
  background-color: #fff0e6;
  color: #cd7f32;
}
</style>
